import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:vdrag_saas/Utils.dart';
import 'package:vdrag_saas/api.dart';
import 'package:vdrag_saas/bus.dart';
import 'package:vdrag_saas/detail/http.dart';
import 'package:vdrag_saas/list/pages/app_bar/seach_tags.dart';

class SearchWidget extends StatefulWidget {
  TextEditingController keywordsController;
  Function(String val) onSearch;
  Function() onClear;
  Future<List<String>> Function(List<String> filter) onUpdate;
  SearchWidget(this.onUpdate, this.onSearch,
      {required this.keywordsController, required this.onClear, super.key});

  @override
  State<SearchWidget> createState() => _SearchWidget();
}

class _SearchWidget extends State<SearchWidget> {
  bool focusAndNotEmpty = false;
  late FocusNode myFocusNode;

  void search() {
    widget.onSearch(widget.keywordsController.text);
  }

  void clear() {
    widget.keywordsController.text = "";
    setState(() {
      focusAndNotEmpty = false;
    });
    Global.searchTagKey.currentState!.clear();
  }

  void change(String val) {
    if (widget.keywordsController.text.isNotEmpty) {
      setState(() {
        focusAndNotEmpty = true;
      });
    }
  }

  @override
  void initState() {
    super.initState();
    myFocusNode = FocusNode();
    // 添加焦点变化监听
    myFocusNode.addListener(onFocus);
  }

  void onFocus() {
    bool status;
    if (widget.keywordsController.text.isNotEmpty) {
      if (myFocusNode.hasFocus) {
        status = true;
      } else {
        status = false;
      }
    } else {
      status = false;
    }
    setState(() {
      focusAndNotEmpty = status;
    });
  }

  @override
  void dispose() {
    // 清理资源，防止内存泄漏
    myFocusNode.removeListener(onFocus);
    myFocusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    bool isMobile = Utils.isMobile(context);
    double fontSize = isMobile ? 12 : 16;
    double height = isMobile ? 36 : 48;
    return Column(
      // mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        Container(
          constraints: const BoxConstraints(maxWidth: 720),
          height: height,
          // color: const Color(0xfff1f1f1),
          child: TextField(
            autofocus: false,
            focusNode: myFocusNode,
            cursorColor: const Color.fromRGBO(150, 150, 150, 1),
            cursorWidth: 1.5,
            controller: widget.keywordsController,
            maxLines: 1,
            style: TextStyle(
              fontFamily: '思源黑体',
              fontSize: fontSize,
              height: 1.5,
              color: Colors.black,
            ),
            onChanged: change,
            onSubmitted: (val) => search(),
            decoration: InputDecoration(
                prefixIcon: Container(
                    padding: const EdgeInsets.only(left: 15, right: 15),
                    child: Image.asset('assets/images/search.png')),
                prefixIconConstraints:
                    const BoxConstraints(minWidth: 30, maxHeight: 20),
                // prefixIcon: const Icon(Icons.search),
                contentPadding:
                    const EdgeInsets.symmetric(vertical: 0, horizontal: 12),
                enabledBorder: const OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(131)),
                    borderSide: BorderSide.none),
                focusedBorder: const OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(131)),
                    borderSide: BorderSide.none),
                hintText: "请输入要查询的内容",
                hintStyle: const TextStyle(
                    color: Color.fromRGBO(204, 204, 204, 1), fontSize: 16),
                // border: InputBorder.none,
                fillColor: Colors.white,
                hoverColor: Colors.white,
                filled: true,
                suffixIcon: Container(
                  height: height,
                  padding:
                      const EdgeInsets.symmetric(vertical: 2, horizontal: 2),
                  child: Row(
                      mainAxisSize: MainAxisSize.min,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Visibility(
                            visible: focusAndNotEmpty,
                            child: IconButton(
                              onPressed: clear,
                              icon: const Icon(Icons.close),
                              style: ButtonStyle(
                                iconColor: const MaterialStatePropertyAll(Color(0xff999999)),
                                  padding: MaterialStateProperty.all(
                                      EdgeInsets.zero),
                                  iconSize: MaterialStateProperty.all(
                                      fontSize * 1.2)),
                            )),
                        Visibility(
                            visible: isMobile,
                            child: FilledButton(
                              onPressed: search,
                              style: ButtonStyle(
                                backgroundColor: const MaterialStatePropertyAll(
                                    Color(0xff216EFF)),
                                padding:
                                    MaterialStateProperty.all(EdgeInsets.zero),
                              ),
                              child: Text('搜索',
                                  style: TextStyle(
                                      fontSize: fontSize, fontFamily: '思源黑体')),
                            ))
                      ]),
                )),
          ),
        ),
        const SizedBox(
          height: 8,
        ),
        SearchTags(widget.onUpdate),
      ],
    );
  }
}
